<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="invite-home">
        <div ref="imageTofile">
          <img class="invite-img1" src="../assets/img/logo.png" alt="">
          <div style="position: relative;width: 100%;height: 160px;">
            <img class="invite-img2" src="../assets/img/invite-img-Z.svg" alt="">
            <img class="invite-img3" src="../assets/img/invite-img-word@3x.png" alt="">
          </div>
          <img v-if="avater" class="invite-img4" :src="avater" alt="">
          <img v-else class="invite-img4" src="../assets/img/personal-img-head.svg" alt="">
          <div style="font-size: 14px;margin: 11px 0px 8px 0px;text-align: center;font-weight: bold;font-family: axis;">{{phone}}</div>
          <div style="font-size: 16px;color: #6E59FF;font-weight: bold;">
            <span>邀请码：</span>
            <span style="font-family: axis;">{{invitationCode}}</span>
          </div>
          <div class="invite-qrcode">
            <div id="qrcode"></div>
          </div>
        </div>
        <div class="invite-btn" @click="wechatFen">
          <span>分享</span>
        </div>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas'
  export default {
    name: 'inviteFriends',
    data () {
      return {
        title:'邀请好友',
        showLoading:false,
        phone:'',
        avater:'',
        invitationCode:''
      }
    },  
    components:{
      native,
      html2canvas
    },
    computed: {
      
    },
    mounted() {
      this.invitationCode = localStorage.getItem('invitationCode');
      this.phone = localStorage.getItem('phone');
      this.avater = localStorage.getItem('avater');
      this.qrcode();
      this.toImage();
    },
    methods: {
      qrcode() {
        let qrcode = new QRCode('qrcode', {
          width: 108,  
          height: 108,
          text: 'http://156.227.1.93/#/register/'+this.invitationCode, // 二维码地址
          colorDark : "#000",
          colorLight : "#fff",
        })
      },
      // 页面元素转图片
      toImage () {                
                var that = this;
                setTimeout(()=>{
                    html2canvas(that.$refs.imageTofile, {
                        scrollY: 0, 
                        scrollX: 0,
                        backgroundColor: null,
                　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                    }).then((canvas) => {
                        let url = canvas.toDataURL('image/png');
                        let bitmap = new plus.nativeObj.Bitmap("test");
                        bitmap.loadBase64Data(url, (e) => {
                            bitmap.save('_doc/_tmp/head' + new Date().getTime() + '.png', {}, (e) => {
                                that.htmlUrl = e.target;
                            });
                        }, (e) => {
                            Toast('加载Base64图片数据失败：' + JSON.stringify(e));                            
                        });
                    })
                }, 1000)
            },
            //保存到本地
            saveImg(){
                var that = this;
                that.showLoading = true;
                var setTim1 = setInterval(()=>{
                        if(that.htmlUrl){
                        setTimeout(()=>{
                            that.showLoading = false;
                            Toast("保存成功");  
                        },2000)
                        plus.gallery.save(            
                            that.htmlUrl,            
                            function () {               
                                Toast("保存成功");              
                            },            
                            function () {                
                                Toast("保存失败");                
                            }            
                        );  
                        clearInterval(setTim1);
                        }
                },200)
            },
            //微信分享
            wechatFen(){
                var that = this;
                that.showLoading = true;
                var setTim2 = setInterval(()=>{
                    if(that.htmlUrl){
                        let msg = {  
                            pictures: [that.htmlUrl],   // pictures 参数为数组  
                            type:'image'  
                        };
                        plus.share.sendWithSystem(  
                            msg,  
                            function(e) {  
                                that.showLoading = false;
                                Toast('分享成功') 
                            },  
                            function(e) {  
                                that.showLoading = false;
                                Toast('分享失败') 
                            }  
                        );
                        clearInterval(setTim2);
                    }
                },200)
            },
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .invite-home{
      text-align: center;
      .invite-img1{
        width: 116px;
        height: 31px;
        margin-top:40px;
        margin-bottom: 20px;
      }
      .invite-img2{
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 0px;
        left: 0px;
      }
      .invite-img3{
        width: 264px;
        height: 154px;
      }
      .invite-img4{
        width: 62px;
        height: 62px;
        margin-top: 30px;
      }
    }
    .invite-qrcode{
      padding: 5px;
      background-color: #fff;
      width: 118px;
      height: 118px;
      margin-left: calc(50% - 59px);
      margin-top: 21px;
      border-radius: 6px;
    }
    .invite-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
    }
  </style>
